<template>
	<gui-page ref="guipage">
		<view slot="gBody">
			<form @submit="submit" class="form">
				<view class="address">
					<view class="address_item bgfff">
						<view class="item flex-ac-jb" v-if="formData.phone">
							<text class="label">当前手机号</text>
							<view class="right flex-ac-je">
								<text>{{$u.hidePhone(formData.phone,3,4) }}</text>
							</view>
						</view>
						<view class="item flex-ac-jb">
							<text class="label">{{formData.phone?'新手机号':'绑定手机号'}}</text>
							<view class="right flex-ac-je flex1">
								<input type="number" v-model="formData.newPhone" name="newPhone" placeholder="请填写新的手机号"
									placeholder-class="plStyle" />
							</view>
						</view>
					<!-- 	<view class="item flex-ac-jb">
							<text class="label">验证码</text>
							<view class="right flex-ac-jb">
								<input type="text" v-model="formData.vcode" name="vcode" placeholder="请先获取验证码"
									placeholder-class="plStyle" style="text-align: left;" />
								<view class="saveBtn" @tap="sendCode">
									{{ vcodeBtnName }}
								</view>
							</view>
						</view> -->
					</view>

				</view>
				<view class="bottomBtn flex-ac-jc">
					<button class="saveBtn" formType="submit">
						提交
					</button>
				</view>
			</form>
		</view>
	</gui-page>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	var graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				isEdit: false,
				formData: {
					phone: '', //13616113932
					newPhone: '', //
					vcode: '', //验证码
				},
				countNum: 120,
				countDownTimer: null,
				vcodeBtnName: '获取验证码',
			}
		},
		onLoad(options) {
			this.formData.phone = this.$u.praseStrEmpty(options.phone)
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['login']),
			submit: function(e) {
				//定义表单规则
				var rule = [{
						name: "newPhone",
						checkType: "phone",
						errorMsg: "请正确输入手机号码"
					},
					// {
					// 	name: "vcode",
					// 	checkType: "notnull",
					// 	errorMsg: "请输入手机验证码"
					// }
				];
				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				console.log(formData);
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					// 当验证 js 不适用某个检查时，使用自定义函数进行检查
					// this.$http.post('/api/oauth/edit', this.formData).then(res => {
					this.$http.post('/api/oauth/edit', {
						phone:this.formData.newPhone
					}).then(res => {	
						let result = res.data
						console.log('修改手机号码', result)
						this.$u.msg('已修改手机号码！')
						this.vuex_userInfo.phone = this.formData.newPhone
						this.$u.vuex('vuex_userInfo', this.vuex_userInfo);
						this.$u.back(1, 500)
					})

				} else {
					this.$u.msg(graceChecker.error)
				}

			},
			//发送验证码
			sendCode() {
				var myreg = /^[1][0-9]{10}$/;
				if (!myreg.test(this.formData.newPhone)) return this.$u.msg('请正确填写手机号码');
				if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = '发送中...';
				this.$http.get(`/api/common/sms/app/${this.formData.newPhone}`).then(res => {
					let result = res.data
					console.log('验证码', result);
					this.$u.msg('短信已发送，请注意查收')
					// 倒计时
					this.countNum = 120;
					this.countDownTimer = setInterval(() => {
						this.countDown();
					}, 1000);
				});
			},
			// 倒计时
			countDown() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = '重新发送';
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
		}
	}
</script>

<style lang="less">
	.address {
		padding: 20rpx 40rpx 10rpx 40rpx;

		.address_item {
			padding: 0 14rpx 0 16rpx;
			border-radius: 10rpx;

			.item {
				padding: 28rpx 20rpx;
				border-bottom: 1px solid #f6f7f8;

				.label {
					width: 160rpx;
				}

				.right {
					flex: 1;
					margin-left: 40rpx;

					.saveBtn {
						width: 160rpx;
						height: 40rpx;
						background: #FFFFFF;
						border: 1rpx solid #FF0019;
						color: #FF0019;
						font-size: 20rpx;
					}

					input {
						flex: 1;
						text-align: right;
					}

				}
			}
		}

	}

	.bottomBtn {
		padding: 98rpx 40rpx 30rpx 40rpx;

		.saveBtn {
			width: 513rpx;
			height: 80rpx;
			font-size: 24rpx;
		}

		.cancleBtn {
			width: 208rpx;
			height: 80rpx;
			background: #fff;
			color: #F406FE;
			border: 1px solid #F406FE;
			margin-right: 19rpx;
		}
	}
</style>